<template>
  <div>
    <a-input placeholder="请输入搜索内容" allow-clear class="mb-4" />
    <a-tree
      :data="treeData"
      :default-expanded-keys="['0-0-0']"
      :default-selected-keys="['0-0-0', '0-0-1']"
      @select="handleSelect"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type prefabricatedType from './type'

const emit = defineEmits(['menu-click'])
const treeData = [
  {
    title: 'Trunk 0-0',
    key: '0-0',
    children: [
      {
        title: 'Branch 0-0-0',
        key: '0-0-0',
        children: [
          {
            title: 'Leaf',
            key: '0-0-0-0',
          },
          {
            title: 'Leaf',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'Branch 0-0-1',
        key: '0-0-1',
        children: [
          {
            title: 'Leaf',
            key: '0-0-1-0',
          },
        ],
      },
    ],
  },
]
const selectedIndex = ref<number>(0)
const handleSelect = (index: number, item: prefabricatedType) => {
  selectedIndex.value = index
  emit('menu-click', item)
}
</script>

<style lang="scss" scoped>
.text {
  @apply p-2 w-full h-[38px] cursor-pointer transition-colors duration-200 text-center;

  &:hover {
    background-color: #f5f5f5;
  }

  &.active-text {
    background: linear-gradient(270deg, #dae9ff 0%, #dae9ff 100%);
  }
}
</style>
